<template>
  <div class="detail">
    <!-- 医院名字与医院等级的结构 -->
    <div class="top">
      <div class="title">{{ hospitalStore.hospitalInfo.hospital?.hosname }}</div>
      <div class="level">
        <svg
          t="1714205933613"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="5280"
          width="13"
          height="13"
        >
          <path
            d="M832 364.8h-147.2s19.2-64 32-179.2c6.4-57.6-38.4-115.2-102.4-121.6h-12.8c-51.2 0-83.2 32-102.4 76.8l-38.4 96c-32 64-57.6 102.4-76.8 115.2-25.6 12.8-121.6 12.8-128 12.8H128c-38.4 0-64 25.6-64 57.6v480c0 32 25.6 57.6 64 57.6h646.4c96 0 121.6-64 134.4-153.6l51.2-307.2c6.4-70.4-6.4-134.4-128-134.4z m-576 537.6H128V422.4h128v480z m640-409.6l-51.2 307.2c-12.8 57.6-12.8 102.4-76.8 102.4H320V422.4c44.8 0 70.4-6.4 89.6-19.2 32-12.8 64-64 108.8-147.2 25.6-64 38.4-96 44.8-102.4 6.4-19.2 19.2-32 44.8-32h6.4c32 0 44.8 32 44.8 51.2-12.8 102.4-32 166.4-32 166.4l-25.6 83.2h243.2c19.2 0 32 0 44.8 12.8 12.8 12.8 6.4 38.4 6.4 57.6z"
            p-id="5281"
            fill="#999999"
          />
        </svg>
        <span>{{ hospitalStore.hospitalInfo.hospital?.param.hostypeString }}</span>
      </div>
    </div>
    <!-- 医院的logo与路线 -->
    <div class="logo">
      <div class="left">
        <img :src="`data:image/jpeg;base64,${hospitalStore.hospitalInfo.hospital?.logoData}`" />
      </div>
      <div class="right">
        <div class="address">
          <svg
            t="1714375921757"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="7950"
            id="mx_n_1714375921759"
            width="14"
            height="14"
          >
            <path
              d="M491.4 995.6h-0.4c-26.9-0.2-50.3-16.6-59.7-41.8l-101-270.9-270.9-101c-25.2-9.4-41.6-32.8-41.8-59.7-0.2-26.9 15.9-50.5 41-60.2l668.1-258.4c24-9.3 50.3-3.8 68.5 14.5 18.2 18.2 23.8 44.5 14.5 68.5L551.2 954.5c-9.6 25-33.1 41.1-59.8 41.1z m-387.6-474l254.9 95.1c17.5 6.5 31.2 20.3 37.7 37.7l95.1 254.9L736.1 277 103.8 521.6zM739.6 237l13 33.6-13-33.6z"
              fill="#333333"
              p-id="7951"
            />
          </svg>
          <span class="text">具体位置：{{ hospitalStore.hospitalInfo.hospital?.param.fullAddress }}</span>
        </div>
        <div class="route">规划路线：{{ hospitalStore.hospitalInfo.hospital?.route}}</div>
      </div>
    </div>
    <!-- 医院介绍 -->
    <div class="footer">
      <h1>医院介绍</h1>
      <p>{{ hospitalStore.hospitalInfo.hospital?.intro }}</p>
    </div>
  </div>
</template>

<script lang="ts" setup>
// @ts-ignore
import { onMounted } from "vue";
// @ts-ignore
import useDetailStore from "@/store/modules/hospitalDetail";
import { useRoute } from "vue-router";
let hospitalStore = useDetailStore();
let $route = useRoute();
onMounted(() => {
  hospitalStore.getHospital($route.query.hoscode);
});
</script>

<style lang="scss" scoped>
.detail {
  margin-top: 30px;
  .top {
    display: flex;
    align-items: center;
    cursor: pointer;
    .title {
      color: #333;
      font-size: 20px;
      font-weight: 700;
      margin-right: 15px;
      letter-spacing: 1px;
    }
    .level {
      display: flex;
      align-items: center;
      color: #999;
      font-size: 13px;
      letter-spacing: 1px;
      span {
        padding-left: 3px;
      }
    }
  }
  .logo {
    display: flex;
    margin-top: 50px;
    .left {
      width: 80px;
      img {
        width: 80px;
        height: 80px;
      }
    }
    .right {
      flex: 1;
      margin-left: 30px;
      color: #333;
      font-size: 14px;
      line-height: 20px;
      .address {
        margin-bottom: 15px;
        .text {
          margin-left: 10px;
          letter-spacing: 1px;
        }
      }
    }
  }
  .footer {
    margin-top: 35px;
    h1 {
      margin-bottom: 15px;
    }
    p {
      text-indent: 2em;
      line-height: 24px;
      color: #666;
      letter-spacing: 1px;
      font-size: 14px;
    }
  }
}
</style>